<template>
  <div class="file-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">文件管理流程</h2>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.shortDesc"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info">
          <template v-if="currentStepInfo">
            <div class="step-header">
              <h3>{{ currentStepInfo.title }}</h3>
              <p class="description">{{ currentStepInfo.description }}</p>
            </div>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData"
                      :rules="rules"
                      ref="stepForm" 
                      label-width="120px"
                      class="step-form">
                <el-form-item v-for="(item, index) in currentStepInfo.formItems"
                             :key="index"
                             :label="item.label"
                             :prop="item.prop"
                             :required="item.required">
                  <el-input v-if="item.type === 'input'" 
                           v-model="formData[item.prop]"
                           :placeholder="item.placeholder">
                    <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                  </el-input>
                  <el-select v-else-if="item.type === 'select'"
                            v-model="formData[item.prop]"
                            :placeholder="item.placeholder"
                            :multiple="item.multiple">
                    <el-option v-for="option in item.options"
                             :key="option.value"
                             :label="option.label"
                             :value="option.value">
                    </el-option>
                  </el-select>
                  <el-date-picker v-else-if="item.type === 'date'"
                                v-model="formData[item.prop]"
                                :type="item.dateType || 'date'"
                                :placeholder="item.placeholder"
                                value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <el-input v-else-if="item.type === 'textarea'"
                           type="textarea"
                           v-model="formData[item.prop]"
                           :rows="item.rows || 4"
                           :placeholder="item.placeholder">
                  </el-input>
                  <el-upload v-else-if="item.type === 'upload'"
                            class="upload-demo"
                            action="#"
                            :auto-upload="false"
                            :on-change="handleFileChange"
                            :file-list="fileList">
                    <el-button size="small" type="primary">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
                  </el-upload>
                </el-form-item>
              </el-form>
              
              <div class="step-tips" v-if="currentStepInfo.tips">
                <h4>注意事项：</h4>
                <ul>
                  <li v-for="(tip, index) in currentStepInfo.tips" :key="index">{{ tip }}</li>
                </ul>
              </div>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep"
                          icon="el-icon-arrow-left">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :loading="submitting"
                          :disabled="!canProceed">
                  <i :class="currentStep === processSteps.length - 1 ? 'el-icon-check' : 'el-icon-arrow-right'"></i>
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FileProcess',
  data() {
    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        fileType: [{ required: true, message: '请选择文件类型', trigger: 'change' }],
        fileCode: [{ required: true, message: '请输入文件编号', trigger: 'blur' }],
        fileTitle: [{ required: true, message: '请输入文件标题', trigger: 'blur' }],
        securityLevel: [{ required: true, message: '请选择密级', trigger: 'change' }],
        department: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
        validityPeriod: [{ required: true, message: '请选择有效期', trigger: 'change' }],
        storageLocation: [{ required: true, message: '请选择存储位置', trigger: 'change' }],
        approvers: [{ required: true, message: '请选择审批人', trigger: 'change' }]
      },
      processSteps: [
        {
          title: '文件基本信息',
          shortDesc: '填写文件基础信息',
          icon: 'el-icon-document',
          description: '请填写文件的基本信息，包括类型、编号、标题等',
          formItems: [
            {
              type: 'select',
              label: '文件类型',
              prop: 'fileType',
              placeholder: '请选择文件类型',
              required: true,
              options: [
                { label: '规章制度', value: 'rules' },
                { label: '工作流程', value: 'workflow' },
                { label: '技术文档', value: 'technical' },
                { label: '会议纪要', value: 'meeting' },
                { label: '合同文件', value: 'contract' },
                { label: '财务文件', value: 'financial' },
                { label: '人事文件', value: 'hr' }
              ]
            },
            {
              type: 'input',
              label: '文件编号',
              prop: 'fileCode',
              placeholder: '请输入文件编号',
              required: true
            },
            {
              type: 'input',
              label: '文件标题',
              prop: 'fileTitle',
              placeholder: '请输入文件标题',
              required: true
            },
            {
              type: 'select',
              label: '密级',
              prop: 'securityLevel',
              placeholder: '请选择密级',
              required: true,
              options: [
                { label: '普通', value: 'normal' },
                { label: '内部', value: 'internal' },
                { label: '秘密', value: 'secret' },
                { label: '机密', value: 'confidential' }
              ]
            }
          ],
          tips: [
            '文件编号应符合公司统一编码规范',
            '文件标题应简明扼要，突出主题',
            '密级选择应符合文件内容安全要求'
          ]
        },
        {
          title: '文件内容管理',
          shortDesc: '上传和描述文件',
          icon: 'el-icon-upload',
          description: '上传文件内容，并填写相关说明信息',
          formItems: [
            {
              type: 'upload',
              label: '文件上传',
              prop: 'fileUpload',
              tip: '支持 doc、docx、pdf、xls、xlsx 格式，单个文件不超过20MB'
            },
            {
              type: 'textarea',
              label: '文件摘要',
              prop: 'summary',
              placeholder: '请输入文件主要内容摘要',
              rows: 4
            },
            {
              type: 'select',
              label: '所属部门',
              prop: 'department',
              placeholder: '请选择所属部门',
              required: true,
              options: [
                { label: '总经办', value: 'ceo_office' },
                { label: '人力资源部', value: 'hr' },
                { label: '财务部', value: 'finance' },
                { label: '技术部', value: 'tech' },
                { label: '市场部', value: 'marketing' },
                { label: '运营部', value: 'operations' }
              ]
            },
            {
              type: 'select',
              label: '关联文件',
              prop: 'relatedFiles',
              placeholder: '请选择关联文件',
              multiple: true,
              options: [
                { label: '公司章程', value: 'company_charter' },
                { label: '员工手册', value: 'employee_handbook' },
                { label: '部门规章', value: 'department_rules' }
              ]
            }
          ],
          tips: [
            '上传前请确认文件格式正确',
            '文件摘要应包含关键信息点',
            '关联文件可帮助建立文件间的关联关系'
          ]
        },
        {
          title: '存储与权限',
          shortDesc: '设置存储和权限',
          icon: 'el-icon-lock',
          description: '配置文件的存储位置和访问权限',
          formItems: [
            {
              type: 'select',
              label: '存储位置',
              prop: 'storageLocation',
              placeholder: '请选择存储位置',
              required: true,
              options: [
                { label: '公共文档库', value: 'public' },
                { label: '部门文档库', value: 'department' },
                { label: '保密文档库', value: 'confidential' },
                { label: '归档文档库', value: 'archive' }
              ]
            },
            {
              type: 'select',
              label: '访问权限',
              prop: 'accessPermission',
              placeholder: '请选择访问权限',
              multiple: true,
              options: [
                { label: '查看权限', value: 'view' },
                { label: '下载权限', value: 'download' },
                { label: '编辑权限', value: 'edit' },
                { label: '删除权限', value: 'delete' }
              ]
            },
            {
              type: 'date',
              label: '有效期',
              prop: 'validityPeriod',
              placeholder: '请选择有效期',
              required: true
            },
            {
              type: 'select',
              label: '授权范围',
              prop: 'authScope',
              placeholder: '请选择授权范围',
              multiple: true,
              options: [
                { label: '全体员工', value: 'all' },
                { label: '部门主管', value: 'managers' },
                { label: '指定部门', value: 'specific_dept' },
                { label: '指定人员', value: 'specific_person' }
              ]
            }
          ],
          tips: [
            '存储位置应与文件密级相匹配',
            '访问权限建议遵循最小权限原则',
            '重要文件建议设置访问日志记录'
          ]
        },
        {
          title: '审批流程',
          shortDesc: '设置审批流程',
          icon: 'el-icon-s-check',
          description: '配置文件的审批流程和相关要求',
          formItems: [
            {
              type: 'select',
              label: '审批人',
              prop: 'approvers',
              placeholder: '请选择审批人',
              required: true,
              multiple: true,
              options: [
                { label: '部门经理', value: 'dept_manager' },
                { label: '分管领导', value: 'supervisor' },
                { label: '文控专员', value: 'doc_controller' },
                { label: '总经理', value: 'general_manager' }
              ]
            },
            {
              type: 'select',
              label: '审批方式',
              prop: 'approvalMethod',
              placeholder: '请选择审批方式',
              options: [
                { label: '依次审批', value: 'sequential' },
                { label: '会签', value: 'countersign' },
                { label: '或签', value: 'either' }
              ]
            },
            {
              type: 'textarea',
              label: '审批要求',
              prop: 'approvalRequirements',
              placeholder: '请输入特殊审批要求或说明',
              rows: 4
            },
            {
              type: 'input',
              label: '提醒时间',
              prop: 'reminderTime',
              placeholder: '请输入审批提醒时间',
              unit: '小时'
            }
          ],
          tips: [
            '审批人选择应符合公司审批权限要求',
            '重要文件建议采用会签方式',
            '可设置审批超时提醒'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true // 实际应用中需要根据表单验证结果返回
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate()
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.completeProcess()
        }
      } catch (error) {
        return false
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('文件管理流程已完成')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.file-process {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    
    .header-content {
      text-align: center;
    }

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
      cursor: pointer;

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .el-steps {
      margin-bottom: 40px;
    }
  }

  .process-content {
    margin-top: 20px;

    .current-step-info {
      text-align: center;

      h3 {
        color: #303133;
        margin-bottom: 10px;
      }

      .description {
        color: #606266;
        margin-bottom: 20px;
      }

      .step-form {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
      }

      .button-group {
        margin-top: 30px;

        .el-button {
          margin: 0 10px;
        }
      }
    }
  }

  :deep(.el-step__icon) {
    cursor: pointer;
  }
}
</style> 